<template>
  <div>
    <Myheader :hasback="true" :title="obj.nm"></Myheader>
    <Myadv />
    <div class="movies-detail-header">
      <img :src="obj.img | formatUrl" alt="" />
      <div class="detail-content">
        <p class="title">{{ obj.nm }}</p>
        <span
          class="iconfont icon-youjiantou_huaban"
          @click="gotodetail()"
        ></span>
      </div>
      <img :src="obj.img | formatUrl" alt="" class="background" />
    </div>
  </div>
</template>

<script>
import Myheader from "../components/public/Myheader.vue";
import Myadv from "../components/public/Myadv.vue";
import { postMoviesDetailApi } from "../utils/api";
export default {
  data() {
    return {
      id: "",
      obj: "",
    };
  },
  async beforeRouteEnter(to, from, next) {
    const res = await postMoviesDetailApi({ id: to.params.id });
    next((vm) => {
      vm.obj = res.result;
      document.title = `《${vm.obj.nm}》_购票_剧情介绍`;
    });
  },
  components: {
    Myheader,
    Myadv,
  },
  methods: {
    // 跳转电影介绍页
    gotodetail() {
      this.$router.push("/detail/" + this.$route.params.id);
    },
  },
  filters: {
    formatUrl(val) {
      return val?.split("/w.h").join("/64.90");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/var.less";
.movies-detail-header {
  height: 188px;
  width: 100%;
  padding: 19px 30px 19px 15px;
  position: relative;
  overflow: hidden;
  color: #fff;
  .center();
  img {
    width: 110px;
    height: 150px;
  }
  .detail-content {
    flex: 1;
    height: 150px;
    padding-left: 10px;
    position: relative;
    .icon-youjiantou_huaban {
      font-size: @l-font;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .background {
    width: 160%;
    height: 150%;
    position: absolute;
    filter: blur(50px);
    z-index: -10;
  }
}
</style>
